import React from 'react'
import { Menu } from 'antd'
import type { MenuProps } from 'antd'
import { RoutesType } from '../../types'
import { useNavigate, useLocation } from 'react-router-dom'

type MenuItem = Required<MenuProps>['items'][number]

const NavMenu = (props) => {
  const { routes } = props
  const navigate = useNavigate()
  const { pathname } = useLocation()
  console.log('routes:', routes)

  const gennerateItems = (routes: RoutesType[]): MenuItem[] => {
    return routes
      .filter((v) => !v.meta?.hidden)
      .map((item) => {
        return {
          key: item.path,
          icon: item.meta?.icon,
          label: item.meta?.title,
        }
      })
  }
  const items: MenuItem[] = gennerateItems(routes)
  return (
    <div>
      <Menu
        theme='dark'
        defaultSelectedKeys={[pathname]}
        mode='inline'
        items={items}
        onClick={({ key }) => navigate(key)}
      />
    </div>
  )
}

export default NavMenu
